<template>
	<view class="container">
		<view class="shop-head">
			<!-- 搜索框 -->
			<view class="shop-search">
				<view>
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="picker">
							<uni-icons type="location-filled" size="20" color="#f00"></uni-icons>{{array[index]}}
						</view>
					</picker>
				</view>
				<view style="width: 80%;">
					<uni-search-bar cancelButton="auto" @confirm="search()"  v-model="searchValue" placeholder="店名关键字">
					</uni-search-bar>
				</view>
			</view>
		</view>
		<scroll-view class="shoplist" scroll-y="true">
			<view v-for="(item,index) in shopList" :key="item.shopId">
				<view class="shop">
					<view class="shop-left">
						<view class="shop-title">{{item.shopName}}</view>
						<view class="shop-adress">{{item.shopPhone}}</view>
						<view class="shop-time">营业时间：
							<text>06:30-22:50</text>
						</view>
						<view class="shop-star">{{item.canName}}</view>
					</view>
					<view class="shop-right">
						<!-- <image src='../../static/logo.png' width="100px"></image> -->
						<view class="shop-take">预定电话</view>
						<view class="shop-phone">{{item.shopPhone}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { nextTick } from "vue";
	export default {
		created(){
			this.initData();
		},
		data() {
			return {
				shopList: [],
				index: 0,
				array: ['全部','生活馆', '一食堂', '二食堂'],
				searchValue: ''
			}
		},
		methods: {
			bindPickerChange(ev) {
				// console.log(ev);
				this.index = ev.detail.value
				this.initData();
			},
			search(){
				this.initData();
			},
			initData(){			
				uni.request({
					url: 'http://192.168.124.51:8080/shop/queryAllShop',
					data: {
						keyword:this.searchValue,
						canName:this.index
					},
					success: res => {
						this.shopList=res.data;
						// console.log(this.shopList);	
					},
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
	}
	.container {
		margin: 30rpx;
		margin-top: 150rpx;
	}

	.shop-head {
		width: 100vw;
		position: fixed;
		top: 0rpx;
		z-index: 999;
		background-color: #fff;
	}

	.shop-search {
		display: flex;
		justify-content: space-between;
		align-content: center;
		padding: 24rpx;
		width: 638rpx;
	}

	.shopList {
		width: 100vw;
		height: 80vh;		
	}

	.shop {
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
		height: 200rpx;
		background-color: #fff;
		border: 2rpx solid #FF5500;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-bottom: 10rpx;
	}

	.shop-left {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.shop-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.shop-adress,
	.shop-time {
		font-size: 24rpx;
		color: #777;
	}

	.shop-star {
		background-color: #FF5500;
		color: #fff;
		width: 90rpx;
		text-align: center;
		border-radius: 4rpx;
		padding: 4rpx;
		font-size: 24rpx;
	}

	.shop-right {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.shop-take {
		color: #FF5500;
		font-size: 24rpx;
		font-weight: bold;
	}

	.shop-phone {
		font-size: 24rpx;
		color: #777;
	}

	.picker {
		/* display: flex;
		justify-content: space-between;
		align-content: center; */
		margin-top: 25rpx;
		font-size: 28rpx;
	}
</style>
